<template>
    <div id="aCoursesList" class="bg-fa of">
        <!-- /课程列表 开始 -->
        <section class="container">
            <header class="comm-title all-teacher-title">
                <h2 class="fl tac">
                    <span class="c-333">全部班级</span>
                </h2>
                <section class="c-tab-title">
                    <a id="subjectAll" title="全部" href="#"></a>
                </section>
            </header>
            <section class="c-sort-box unBr">
                <div>
                    <el-input
                        placeholder="请输入你想搜的班级"
                        prefix-icon="el-icon-search"
                        v-model="searchParam"
                        clearable
                        @change="pageClass()"
                        style="width:20%"
                    ></el-input>
                    <br />
                    <br />
                    <!-- /无数据提示 开始-->
                    <section class="no-data-wrap" v-if="total===0">
                        <em class="icon30 no-data-ico">&nbsp;</em>
                        <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                    </section>
                    <!-- /无数据提示 结束-->
                    <article class="comm-course-list">
                        <ul class="of" id="bna">
                            <li v-for="room in classrooms" :key="room.id">
                                <div class="cc-l-wrap">
                                    <section class="course-img">
                                        <img
                                            :src="room.cover"
                                            class="img-responsive"
                                            :alt="room.name"
                                            style="width:100%;height:180px"
                                        />
                                        <div class="cc-mask">
                                            <a
                                                :href="'/classroom/'+room.id"
                                                :title="room.name"
                                                class="comm-btn c-btn-1"
                                            >进去逛逛</a>
                                        </div>
                                    </section>
                                    <h3 class="hLh30 txtOf mt10">
                                        <a
                                            :href="'/classroom/'+room.id"
                                            :title="room.name"
                                            class="course-title fsize18 c-333"
                                        >{{room.name}}</a>
                                    </h3>
                                    <section class="mt10 hLh20 of">
                                        <span class="fr jgTag bg-green">
                                            <i
                                                class="c-fff fsize12 f-fA"
                                            >{{room.price===0?"免费":"付费"}}</i>
                                        </span>
                                    </section>
                                </div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </article>
                </div>
                <!-- 公共分页 开始 -->
                <div>
                    <div class="paging">
                        <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :total="total"
                            :page-size="8"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
                <!-- 公共分页 结束 -->
            </section>
        </section>
        <!-- /课程列表 结束 -->
    </div>
</template>
<script>
import classApi from "@/api/course/classroom";
export default {
    data() {
        return {
            searchParam: "",
            total: 0,
            current: 1,
            classrooms: [],
        };
    },
    computed: {},
    watch: {},
    methods: {
        init() {
            this.pageClass();
        },
        pageClass(page = 1) {
            this.current = page;
            classApi
                .pageClass(this.current, 8, this.searchParam)
                .then((response) => {
                    this.total = response.data.rows;
                    this.classrooms = response.data.classrooms;
                });
        },
        handleCurrentChange(val) {
            this.current = val;
            this.pageClass(val);
        },
    },
    created() {
        this.init();
    },
};
</script>